<template>
  <div>
    <el-row style="height: fit-content">
      <el-col :span="12">
        <div class="question-wrap">
          <div v-for="(item,index) in questionList" :key="index">
            <div class="question-item">
              <div class="question-id-div" style="user-select: none">{{ index + 1 }}.&nbsp;</div>
              <div class="question-sen-div">
                <question :id="item.id" class="question-sen" @keydown='keyHandle' :tabindex="index"
                          :ref="setQuestionNodeRefsMap">
                  {{ item.sen }}
                </question>
                <i class="el-icon-refresh-left question-reset" @click="resetQuestion(item)" size="mini" plain
                   style="user-select: none" v-show="!hadsubmit">
                </i>
              </div>
            </div>
          </div>

        </div>
      </el-col>
      <el-col :span="12">
        <div class="reply-wrap" v-show="!hadsubmit">
          <span style="padding-left:50%;font-size: small;font-weight:800;color: #555254">答题键盘快捷键</span>
          <ul style="padding-left:50%;margin-top:10px">

            <li style="clear:both;text-decoration: none;list-style: none;">
              <div>

                <el-button type="primary" size="mini" class="el-button-block" style="float: left"
                           @click="toggleSubjectApplier" plain>
                  主语(S)
                </el-button>
                <span class="subject preview" style=""> </span>
              </div>

            </li>
            <li style="clear:both;text-decoration: none;list-style: none;">
              <div>
                <el-button type="primary" size="mini" class="el-button-block" style="float:left"
                           @click="togglePredicateApplier" plain>谓语(V)
                </el-button>
                <span class="predicate preview" style="transform: translateX(-25px)"> </span>
              </div>
            </li>
            <li style="clear:both;text-decoration: none;list-style: none;">
              <el-button type="primary" size="mini" class="el-button-block" style="float: left"
                         @click="toggleObjectApplier" plain>
                宾语(F)
              </el-button>
              <span class=" preview object"> </span>
            </li>
            <li style="clear:both;text-decoration: none;list-style: none;">
              <el-button type="primary" size="mini" class="el-button-block" style="float: left"
                         @click="toggleAdverbialApplier" plain>
                状语(A)
              </el-button>
              <span class="adverbial previewsymbol"> </span>
            </li>
            <li style="clear:both;text-decoration: none;list-style: none;">
              <el-button type="primary" size="mini" class="el-button-block" style="float: left"
                         @click="toggleAttributeApplier" plain>
                定语(R)
              </el-button>
              <span class="attribute previewsymbol"> </span>
            </li>
            <li style="clear:both;text-decoration: none;list-style: none;">
              <el-button type="primary" size="mini" class="el-button-block" style="float: left"
                         @click="toggleComplementApplier" plain>
                补语(C)
              </el-button>
              <span class="complement preview"> </span>
            </li>
            <li style="clear:both;text-decoration: none;list-style: none;">
              <el-button type="primary" size="mini" class="el-button-block" style="float: left"
                         @click="toggleExpressionApplier"
                         plain>表语(G)
              </el-button>
              <span class="expression preview" style="transform: translateX(-25px)"> </span>
            </li>
            <li style="clear:both; text-decoration: none;list-style: none;">
              <el-button type="primary" size="mini" class="el-button-block" style="float: left"
                         @click="toggleAppositiveApplier"
                         plain>同位语(Q)
              </el-button>
              <span class="appositive previewsymbol"> </span>
            </li>
          </ul>
        </div>
        <div class="key" v-show="hadsubmit">
          <div class="question-wrap">
            <div v-for="(item,index) in keyList1" :key="index">

              <div class="question-item">
                <div class="question-id-div" style="user-select: none">{{ index + 1 }}.&nbsp;</div>
                <div class="key-sen-div">
                  <key :id="item.id" class="key-sen" :tabindex="index" :ref="setKeyNodeRefsMap" v-html="item.html">
                  </key>
                </div>
              </div>

            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>

  <div style="height: 30px;width: auto">
    <button class="button" @click="submitData" style="display:block;margin:0 auto"> {{ content }}</button>
  </div>


</template>
<script>
import rangy from 'rangy'
import 'rangy/lib/rangy-textrange.js'

export default {

  name: "TextSelection",
  inject: ['reloadALL'],
  data() {
    let hadsubmit
    let subjectApplier //主语
    let predicateApplier //谓语
    let objectApplier //宾语
    let adverbialApplier //状语
    let attributeApplier //定语
    let complementApplier //补语
    let expressionApplier //表语
    let appositiveApplier //同位语
    let classApplierModule

    let errorApplier


    let questionNodeRefsMap = new Map();
    let keyNodeRefsMap = new Map();
    return {

      consiArray: ["subject", "predicate", "object", "adverbial", "attribute", "complement", "expression", "appositive"],
      content: "提交",
      hadsubmit: false,
      questionList: [{id: "1", sen: "People talk."},
        {id: "2", sen: "Dogs bark."},
        {id: "3", sen: "Class begins."},
        {id: "4", sen: "Birds fly in the sky."},
        {id: "5", sen: "He runs in the park."}
      ],

      keyList1: [{
        id: "1",
        sen: "People talk.",
        keys: [
          {consi: "subject", start: 0, end: 6},
          {consi: "predicate", start: 7, end: 11},
          {consi: "object", start: -1, end: -1},
          {consi: "adverbial", start: -1, end: -1},
          {consi: "attribute", start: -1, end: -1},
          {consi: "complement", start: -1, end: -1},
          {consi: "expression", start: -1, end: -1},
          {consi: "appositive", start: -1, end: -1}
        ],
        html: "<subject>People</subject> talk."
      }, {
        id: "2",
        sen: "Dogs bark.",
        keys: [
          {consi: "subject", start: 0, end: 4},
          {consi: "predicate", start: 5, end: 9},
          {consi: "object", start: -1, end: -1},
          {consi: "adverbial", start: -1, end: -1},
          {consi: "attribute", start: -1, end: -1},
          {consi: "complement", start: -1, end: -1},
          {consi: "expression", start: -1, end: -1},
          {consi: "appositive", start: -1, end: -1}
        ],
        html: "<subject>Doges</subject> <predicate>bark</predicate>."
      }, {
        id: "3",
        sen: "Class begins.",
        keys: [
          {consi: "subject", start: 0, end: 5},
          {consi: "predicate", start: 6, end: 12},
          {consi: "object", start: -1, end: -1},
          {consi: "adverbial", start: -1, end: -1},
          {consi: "attribute", start: -1, end: -1},
          {consi: "complement", start: -1, end: -1},
          {consi: "expression", start: -1, end: -1},
          {consi: "appositive", start: -1, end: -1}
        ],
        html: "<subject>Class</subject> <predicate>begins</predicate>."
      }, {
        id: "4",
        sen: "Birds fly in the sky.",
        keys: [
          {consi: "subject", start: 0, end: 5},
          {consi: "predicate", start: 6, end: 9},
          {consi: "object", start: -1, end: -1},
          {consi: "adverbial", start: 10, end: 20},
          {consi: "attribute", start: -1, end: -1},
          {consi: "complement", start: -1, end: -1},
          {consi: "expression", start: -1, end: -1},
          {consi: "appositive", start: -1, end: -1}
        ],
        html: "<subject>Birds</subject> <predicate>fly</predicate> <adverbial>in the sky</adverbial>."
      }, {
        id: "5",
        sen: "He runs in the park.",
        keys: [
          {consi: "subject", start: 0, end: 2},
          {consi: "predicate", start: 3, end: 7},
          {consi: "object", start: -1, end: -1},
          {consi: "adverbial", start: 8, end: 19},
          {consi: "attribute", start: 11, end: 20},
          {consi: "complement", start: -1, end: -1},
          {consi: "expression", start: -1, end: -1},
          {consi: "appositive", start: -1, end: -1}
        ],
        html: "<subject>He</subject> <predicate>runs</predicate> <adverbial>in the park</adverbial>."
      }],

      keyList: [
        {
          id: "1",
          sen: [{word: "People", consi: "subject"},
            {word: "talk", consi: "none"},
            {word: ".", consi: "none"}],
        },
        {
          id: "2",
          sen: [{word: "Dogs", consi: "subject"},
            {word: "bark", consi: "predicate"},
            {word: ".", consi: "none"}]
        },
        {
          id: "3",
          sen: [{word: "Class", consi: "subject"},
            {word: "begins", consi: "predicate"},
            {word: ".", consi: "none"}]
        },
        {
          id: "4",
          sen: [{word: "Birds", consi: "subject"},
            {word: "fly", consi: "predicate"},
            {word: "in the sky", consi: "adverbial"}, {word: ".", consi: "none"},]
        },
        {
          id: "5",
          sen: [{word: "He", consi: "subject"},
            {word: "runs", consi: "predicate"},
            {word: "in the park", consi: "adverbial"}, {word: ".", consi: "none"}]
        }
      ],

      //用户的回答
      answerList: [
        {
          id: "1",
          ans: [{consi: "subject", start: -1, end: -1},
            {consi: "predicate", start: -1, end: -1},
            {consi: "object", start: -1, end: -1},
            {consi: "adverbial", start: -1, end: -1},
            {consi: "attribute", start: -1, end: -1},
            {consi: "complement", start: -1, end: -1},
            {consi: "expression", start: -1, end: -1},
            {consi: "appositive", start: -1, end: -1}]
        },
        {
          id: "2",
          ans: [{consi: "subject", start: -1, end: -1},
            {consi: "predicate", start: -1, end: -1},
            {consi: "object", start: -1, end: -1},
            {consi: "adverbial", start: -1, end: -1},
            {consi: "attribute", start: -1, end: -1},
            {consi: "complement", start: -1, end: -1},
            {consi: "expression", start: -1, end: -1},
            {consi: "appositive", start: -1, end: -1}]
        },
        {
          id: "3",
          ans: [{consi: "subject", start: -1, end: -1},
            {consi: "predicate", start: -1, end: -1},
            {consi: "object", start: -1, end: -1},
            {consi: "adverbial", start: -1, end: -1},
            {consi: "attribute", start: -1, end: -1},
            {consi: "complement", start: -1, end: -1},
            {consi: "expression", start: -1, end: -1},
            {consi: "appositive", start: -1, end: -1}]
        }, {
          id: "4",
          ans: [{consi: "subject", start: -1, end: -1},
            {consi: "predicate", start: -1, end: -1},
            {consi: "object", start: -1, end: -1},
            {consi: "adverbial", start: -1, end: -1},
            {consi: "attribute", start: -1, end: -1},
            {consi: "complement", start: -1, end: -1},
            {consi: "expression", start: -1, end: -1},
            {consi: "appositive", start: -1, end: -1}]
        }, {
          id: "5",
          ans: [{consi: "subject", start: -1, end: -1},
            {consi: "predicate", start: -1, end: -1},
            {consi: "object", start: -1, end: -1},
            {consi: "adverbial", start: -1, end: -1},
            {consi: "attribute", start: -1, end: -1},
            {consi: "complement", start: -1, end: -1},
            {consi: "expression", start: -1, end: -1},
            {consi: "appositive", start: -1, end: -1}]
        },
      ],

      subjectApplier,
      predicateApplier,
      objectApplier,
      adverbialApplier,
      attributeApplier,
      complementApplier,
      expressionApplier,
      appositiveApplier,

      classApplierModule,
      errorApplier,

      questionNodeRefsMap,
      keyNodeRefsMap

    }
  },

  methods: {
    submitData() {
      if (this.hadsubmit === false) {
        this.content = "订正";
        this.hadsubmit = true;
        this.checkAnswer()
      } else {
        this.content = "提交";
        this.hadsubmit = false;
        this.clearQuestionError()
      }

    },

    //根据keyList将划线样式应用到对应区域，以字符偏移位置作为定位索引。
    applierClassToKey() {
      let range = rangy.createRange()
      for (const item of this.keyList1) {
        // console.log("item.id：" + item.id)
        // console.log(this.keyNodeRefsMap.get(item.id).childNodes[0])

        for (const key of item.keys) {
          console.log(this.keyNodeRefsMap.get(item.id).childNodes)
          console.log("key.start:" + key.start + " key.end:" + key.end)
          if (key.start !== -1) {
            //设置Range范围为key中对应的文本结点
            range.setStartAndEnd(this.keyNodeRefsMap.get(item.id).childNodes[0], key.start, key.end)
            this.getApplierByConsi(key.consi).applyToRange(range)
            // this.subjectApplier.applyToRange(range)
          }
        }
      }
    },

    //检查用户选择区域是否合法。
    checkSelection() {
      // console.log(rangy.getSelection())
      if (rangy.getSelection().rangeCount === 0) return
      console.log("起始结点id：" + this.getQuestionIdByDomNode(rangy.getSelection().anchorNode))
      console.log("终止结点id：" + this.getQuestionIdByDomNode(rangy.getSelection().focusNode))

      // console.log(this.questionNodeRefsMap.get('1'))
      // console.log(rangy.getSelection().getBookmark(this.questionNodeRefsMap.get('1')));

      if (rangy.getSelection().focusNode.className === "question-sen-div") {
        this.$message('无效选择：请勿选择句尾符号');
        return false
      }
      if (this.getQuestionIdByDomNode(rangy.getSelection().anchorNode) !== this.getQuestionIdByDomNode(rangy.getSelection().focusNode)) {
        this.$message('无效选择：请勿跨越多个问题');
        return false
      }
      return true
    },

    //给定一个dom结点，在树上向上遍历获取它所属的questionId，如果找不到则返回-1；
    getQuestionIdByDomNode(node) {
      let curNode = node;
      while (curNode !== window.document) {
        if (curNode.tagName === "QUESTION") {
          return curNode.id;
        }
        curNode = curNode.parentNode;
      }
      curNode = node;

      return -1;
    },

    //在v-for时将循环的item放入Map中，此处为QuestionMap。
    setQuestionNodeRefsMap(el) {
      this.questionNodeRefsMap.set(el.id, el);
    },

    //在v-for时将循环的item放入Map中，此处为KeyMap。
    setKeyNodeRefsMap(el) {
      this.keyNodeRefsMap.set(el.id, el);
      // console.log("插入到keyMap")
      // console.log(this.keyNodeRefsMap.get(el.id))
    },

    //给定一个问题结点，清除该结点下的全部样式。
    resetQuestion(item) {
      let range = rangy.createRange()

      range.selectNode(this.questionNodeRefsMap.get(item.id))
      for (const consi of this.consiArray) {
        this.getApplierByConsi(consi).undoToRange(range)
      }
      this.getApplierByConsi("error").undoToRange(range)

      for (const ansItem of this.answerList) {
        if (ansItem.id === item.id) {
          for (const ansItemElement of ansItem.ans) {
            ansItemElement.start = -1;
            ansItemElement.end = -1;
          }
        }
      }
    },

    //重置问题，清除所有问题的样式
    resetAllQuestion() {
      let range = rangy.createRange()
      for (const item of this.questionNodeRefsMap) {
        range.selectNode(item[1])
        for (const consi of this.consiArray) {
          this.getApplierByConsi(consi).undoToRange(range)
        }
        this.getApplierByConsi("error").undoToRange(range)
      }
    },

    //清理问题区错误高亮
    clearQuestionError() {
      for (const item of this.questionNodeRefsMap) {
        let range = rangy.createRange()
        range.selectNode(item[1])
        this.getApplierByConsi("error").undoToRange(range)
      }
    },

    //用户答题后更新到回答列表
    setUserAnswer(id, consi, start, end) {
      for (const item of this.answerList) {
        if (item.id === id.toString()) {
          for (const ansCons of item.ans) {
            if (ansCons.consi === consi) {
              ansCons.start = start
              ansCons.end = end
            }
          }
        }
      }
    },

    //检查答案
    checkAnswer() {
      //todo 1. 通过toggle取消的区域，不会更新answerList，导致提交后判断对错有误。
      //todo 2. 这里有个四层循环，主要是answer和key的数据结构导致，目前想到后期应该将其抽象为对象。

      let diff = new Map()
      for (const key of this.keyList1) {
        for (const ans of this.answerList) {
          if (key.id === ans.id) {

            //四层循环，哪个人才想出来的代码
            for (const keyConsi of key.keys) {
              for (const ansConsi of ans.ans) {
                if (keyConsi.consi === ansConsi.consi) {
                  if (keyConsi.start !== ansConsi.start || keyConsi.end !== ansConsi.end) {
                    console.log("id: " + key.id + " consi:" + keyConsi.consi + " start:" + keyConsi.start)
                    let diffList = []
                    if (diff.has(key.id.toString())) {
                      diffList = diff.get(key.id)
                      diffList.push({start: keyConsi.start, end: keyConsi.end})
                    } else {
                      diffList.push({start: keyConsi.start, end: keyConsi.end})
                    }
                    diff.set(key.id.toString(), diffList)
                  }
                }
              }
            }
          }
        }
      }
      let range = rangy.createRange()

      for (const item of diff) {
        let curNode = this.questionNodeRefsMap.get(item[0])
        // console.log("curNode: ")
        // console.log(curNode)
        for (const diffItem of item[1]) {
          // console.log(diffItem)
          range.selectCharacters(curNode, diffItem.start, diffItem.end)
          // console.log(range)
          this.errorApplier.applyToRange(range)
        }
      }
    },

    //给定句子成分字符，返回对应的样式应用器。
    getApplierByConsi(consi) {
      switch (consi) {
        case "subject": {
          return this.subjectApplier;
        }
        case "predicate": {
          return this.predicateApplier;
        }
        case "object": {
          return this.objectApplier;
        }
        case "adverbial": {
          return this.adverbialApplier;
        }
        case "attribute": {
          return this.attributeApplier;
        }
        case "complement": {
          return this.complementApplier;
        }
        case "expression": {
          return this.expressionApplier;
        }
        case "appositive": {
          return this.appositiveApplier;
        }

        case "error": {
          return this.errorApplier;
        }
        default: {
          return null;
        }
      }
    },

    //将样式引用到用户所选的区域。
    toggleSubjectApplier() {
      if (!this.checkSelection()) return
      this.subjectApplier.toggleSelection();
      const curId = this.getQuestionIdByDomNode(rangy.getSelection().anchorNode)
      const start = rangy.getSelection().getBookmark(this.questionNodeRefsMap.get(curId)).rangeBookmarks[0].start
      const end = rangy.getSelection().getBookmark(this.questionNodeRefsMap.get(curId)).rangeBookmarks[0].end
      this.setUserAnswer(curId, "subject", start, end)

      console.log("选中区域相对结点的开头：" + start)
      console.log("选中区域相对结点的结尾：" + end)
    },
    togglePredicateApplier() {
      if (!this.checkSelection()) return
      this.predicateApplier.toggleSelection();
      const curId = this.getQuestionIdByDomNode(rangy.getSelection().anchorNode)
      const start = rangy.getSelection().getBookmark(this.questionNodeRefsMap.get(curId)).rangeBookmarks[0].start
      const end = rangy.getSelection().getBookmark(this.questionNodeRefsMap.get(curId)).rangeBookmarks[0].end
      this.setUserAnswer(curId, "predicate", start, end)

      console.log("选中区域相对结点的开头：" + start)
      console.log("选中区域相对结点的结尾：" + end)
    },
    toggleObjectApplier() {
      if (!this.checkSelection()) return
      this.objectApplier.toggleSelection();
      const curId = this.getQuestionIdByDomNode(rangy.getSelection().anchorNode)
      const start = rangy.getSelection().getBookmark(this.questionNodeRefsMap.get(curId)).rangeBookmarks[0].start
      const end = rangy.getSelection().getBookmark(this.questionNodeRefsMap.get(curId)).rangeBookmarks[0].end
      this.setUserAnswer(curId, "object", start, end)

      console.log("选中区域相对结点的开头：" + start)
      console.log("选中区域相对结点的结尾：" + end)
    },
    toggleAdverbialApplier() {
      if (!this.checkSelection()) return
      this.adverbialApplier.toggleSelection();
      const curId = this.getQuestionIdByDomNode(rangy.getSelection().anchorNode)
      const start = rangy.getSelection().getBookmark(this.questionNodeRefsMap.get(curId)).rangeBookmarks[0].start
      const end = rangy.getSelection().getBookmark(this.questionNodeRefsMap.get(curId)).rangeBookmarks[0].end
      this.setUserAnswer(curId, "adverbial", start, end)

      console.log("选中区域相对结点的开头：" + start)
      console.log("选中区域相对结点的结尾：" + end)
    },
    toggleAttributeApplier() {
      if (!this.checkSelection()) return
      this.attributeApplier.toggleSelection();
      const curId = this.getQuestionIdByDomNode(rangy.getSelection().anchorNode)
      const start = rangy.getSelection().getBookmark(this.questionNodeRefsMap.get(curId)).rangeBookmarks[0].start
      const end = rangy.getSelection().getBookmark(this.questionNodeRefsMap.get(curId)).rangeBookmarks[0].end
      this.setUserAnswer(curId, "attribute", start, end)

      console.log("选中区域相对结点的开头：" + start)
      console.log("选中区域相对结点的结尾：" + end)
    },
    toggleComplementApplier() {
      if (!this.checkSelection()) return
      this.complementApplier.toggleSelection();
      const curId = this.getQuestionIdByDomNode(rangy.getSelection().anchorNode)
      const start = rangy.getSelection().getBookmark(this.questionNodeRefsMap.get(curId)).rangeBookmarks[0].start
      const end = rangy.getSelection().getBookmark(this.questionNodeRefsMap.get(curId)).rangeBookmarks[0].end
      this.setUserAnswer(curId, "complement", start, end)

      console.log("选中区域相对结点的开头：" + start)
      console.log("选中区域相对结点的结尾：" + end)
    },
    toggleExpressionApplier() {
      if (!this.checkSelection()) return
      this.expressionApplier.toggleSelection();
      const curId = this.getQuestionIdByDomNode(rangy.getSelection().anchorNode)
      const start = rangy.getSelection().getBookmark(this.questionNodeRefsMap.get(curId)).rangeBookmarks[0].start
      const end = rangy.getSelection().getBookmark(this.questionNodeRefsMap.get(curId)).rangeBookmarks[0].end
      this.setUserAnswer(curId, "expression", start, end)

      console.log("选中区域相对结点的开头：" + start)
      console.log("选中区域相对结点的结尾：" + end)
    },
    toggleAppositiveApplier() {
      if (!this.checkSelection()) return
      this.appositiveApplier.toggleSelection();
      const curId = this.getQuestionIdByDomNode(rangy.getSelection().anchorNode)
      const start = rangy.getSelection().getBookmark(this.questionNodeRefsMap.get(curId)).rangeBookmarks[0].start
      const end = rangy.getSelection().getBookmark(this.questionNodeRefsMap.get(curId)).rangeBookmarks[0].end
      this.setUserAnswer(curId, "appositive", start, end)

      console.log("选中区域相对结点的开头：" + start)
      console.log("选中区域相对结点的结尾：" + end)
    },

    //处理用户键盘按键
    keyHandle(e) {
      switch (e.keyCode) {
          // key S
        case 83: {
          this.toggleSubjectApplier();
          break;
        }
          // key V
        case 86: {
          this.togglePredicateApplier();
          break;
        }
          // key F
        case 70: {
          this.toggleObjectApplier();
          break;
        }
          // key A
        case 65: {
          this.toggleAdverbialApplier();
          break;
        }
          // key R
        case 82: {
          this.toggleAttributeApplier();
          break;
        }
          // key C
        case 67: {
          this.toggleComplementApplier();
          break;
        }
          // key G
        case 71: {
          this.toggleExpressionApplier();
          break;
        }
          // key Q
        case 81: {
          this.toggleAppositiveApplier();
          break;
        }
      }
    }
  }
  ,
  created() {
    // customElements.define('question', WordCount, { extends: 'span' });

    rangy.init()

    this.classApplierModule = rangy.modules.ClassApplier;
    if (rangy.supported && this.classApplierModule && this.classApplierModule.supported) {
      // 创建Class添加器
      this.subjectApplier = rangy.createClassApplier("subject", {
        elementTagName: "subject",
        tagNames: ["subject"]
      });

      this.predicateApplier = rangy.createClassApplier("predicate", {
        elementTagName: "predicate",
        tagNames: ["predicate"]
      });

      this.objectApplier = rangy.createClassApplier("object", {
        elementTagName: "object",
        tagNames: ["object"]
      });

      this.adverbialApplier = rangy.createClassApplier("adverbial", {
        elementTagName: "adverbial",
        tagNames: ["adverbial"]
      });

      this.attributeApplier = rangy.createClassApplier("attribute", {
        elementTagName: "attribute",
        tagNames: ["attribute"]
      });

      this.complementApplier = rangy.createClassApplier("complement", {
        elementTagName: "complement",
        tagNames: ["complement"]
      });

      this.expressionApplier = rangy.createClassApplier("expression", {
        elementTagName: "expression",
        tagNames: ["expression"]
      });

      this.appositiveApplier = rangy.createClassApplier("appositive", {
        elementTagName: "appositive",
        tagNames: ["appositive"]
      });

      this.errorApplier = rangy.createClassApplier("errorText", {elementTagName: "error"});
    }
  },

  mounted() {
    //页面渲染完成后，将答案的划线样式引用到答案上。
    // this.applierClassToKey()
  }

}
</script>

<style scoped>
@import url(http://fonts.font.im/css?family=Cabin:400,500,600,700);

.question-wrap {
  min-height: 400px;
  width: 100%;
  padding: 10px;
}

.question-item {
  display: flex;
}

.question-id-div {
  outline: 0;
  padding: 10px;
  font-size: medium;
  font-weight: 500;
  font-family: 'Cabin', sans-serif;
}

.question-sen-div {
  outline: 0;
  padding: 10px;
  font-size: medium;
  font-weight: 500;
  font-family: 'Cabin', sans-serif;
}

.question-sen {
  outline: 0;
}

.question-reset {
  margin-left: 30px;
  visibility: hidden;
}

.question-reset:hover {
  color: dodgerblue;
}

.question-reset:active {
  color: black;
}

.question-sen-div:hover > .question-reset {
  visibility: visible;
}

.key-sen-div {
  outline: 0;
  padding: 10px;
  font-size: medium;
  font-weight: 500;
  font-family: 'Cabin', sans-serif;
}

.reply-wrap {
  margin-left: 30px;
}

.reply-wrap .el-button {
  margin: 4px auto;
}

.el-button-group {

}

.el-button-block {
  display: block;
  margin: 4px auto;
}

.testFooter {
  text-align: center;
}

.preview {
  float: left;
  margin-left: 10px;
  width: 50px;
  height: 15px;
}

.previewsymbol {
  float: left;

  width: 50px;
  height: 30px;
  line-height: 30px;
}

</style>
